<!-- 机构小程序管理 -->
<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="onReset">
        <a-form-item class="table-search-item">
          <GzTreeSelect ref="gzThreeRef" v-model:value="searchData['agentNo']"/>
        </a-form-item>
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="searchData['state']" placeholder="状态">
            <a-select-option :value="'0'">
              上线
            </a-select-option>
            <a-select-option :value="1">
              下线
            </a-select-option>
          </a-select>
        </a-form-item>
      </GzSearchForm>

      <!-- 列表渲染 -->
      <GzTable ref="infoTable" :init-data="true" :req-table-data-func="reqTableDataFunc" :table-columns="tableColumns"
        :search-data="searchData" row-key="agentNo" @btnLoadClose="btnLoading = false">
        <template #topBtnSlot>
          <a-button type="primary" @click="addOrEditFunc(false)">
            <plus-outlined />新建
          </a-button>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'state'">
            <a-switch :checked="record.state === 0 ? true : false" @change="onStateChange(record.tPayCashierAdId,record.state)"/>
            <!-- <template v-if="record.state === 1">下线</template> -->
          </template>

          <template v-if="column.key === 'operation'">
            <!-- 操作列插槽 -->
            <GzTableColumns>
              <a-button type="link" @click="addOrEditFunc(record.tPayCashierAdId)">修改</a-button>
            </GzTableColumns>
          </template>
        </template>
      </GzTable>
    </a-card>
    <!-- 新增修改 -->
    <AddOrEdit ref="addOrEditRef" :callbackFunc="searchFunc" />
  </page-header-wrapper>
</template>
<script setup lang="ts">
import AddOrEdit from "./AddOrEdit.vue";
import { req, API_URL_PAYCASHIERAD_LIST, API_URL_PAYCASHIERAD_ISON } from "@/api/manage";
import { ref, reactive, getCurrentInstance } from "vue";

const infoTable = ref();
const addOrEditRef = ref();
const gzThreeRef = ref()

const { $access, $infoBox } = getCurrentInstance()!.appContext.config.globalProperties;

let tableColumns = reactive([
  { key: 'agentNo', title: '机构号', dataIndex: 'agentNo', width: 140, fixed: 'left' },
  { key: 'agentName', title: '机构名称', dataIndex: 'agentName', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'path', title: '小程序路由', dataIndex: 'path', width: 200, minWidth: 200, maxWidth: 270 },
  { key: 'createdAt', title: '创建时间', dataIndex: 'createdAt', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'sTime', title: '开始时间', dataIndex: 'sTime', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'eTime', title: '结束时间 ', dataIndex: 'eTime', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'state', title: '状态 ', dataIndex: 'state', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'operation', title: '操作', width: 250, fixed: 'right', align: 'center' }
])

let btnLoading = ref(false);
let searchData = ref({});

/**
 * 请求table接口数据
 * @param params  查询条件
 */
function reqTableDataFunc(params: any) {
  return req.add(API_URL_PAYCASHIERAD_LIST, params);
}

/**
 * 重置搜索条件
 */
function onReset(){
  searchData.value = {}
  gzThreeRef.value.clear()
}

/**
 * 点击【查询】按钮点击事件
 */
function searchFunc() {
  infoTable.value.refTable(true);
}

// 新增修改
function addOrEditFunc(record) {
  addOrEditRef.value.show(record);
}
/**
 * 修改广告位状态
 */
function onStateChange(tPayCashierAdId,isOn){
  const uploadObject = {
    tPayCashierAdId,
    isOn: 0,
  }
  let message = '上线'
  if(isOn === 0){
    uploadObject.isOn = 1
    message = '下线'
  }
  $infoBox.confirmDanger(`确认${message}？`, `请确认是否${message}当前广告位？`, () => {
    req.add(API_URL_PAYCASHIERAD_ISON, uploadObject).then(res => {
      $infoBox.message.success(`${message}成功`)
      infoTable.value.refTable(true)
    })
  })
}
</script>
